import React, { useEffect, useState } from 'react'
import { Link, useDispatch, useSelector } from 'umi'
import styles from './msgboard.less'
import '../../static/font_article/iconfont.css'
import { Avatar, Button, Form, Input, Popover, Pagination } from 'antd';
import { IState } from '../../utils/msgboard'
import { emojis } from '@/utils/emojis'
import theTime from '../../services/module/index'

const msgboard: React.FC = () => {
    const state: IState = useSelector((state: { msgboard: IState }) => state.msgboard)
    const dispatch = useDispatch()
    const [popover, setpopover] = useState(false)
    const [user, setuser] = useState(false)

    useEffect(() => {
        dispatch({
            type: "msgboard/getCommentData"
        })
        dispatch({
            type: "msgboard/getRecommentData"
        })
    }, [])
    console.log(state);

    let VisibleChange = () => {
        if (localStorage.getItem('user')) {
            setpopover(!popover)
        } else {
            setpopover(false)
        }
    }

    let shade = () => {
        let users = localStorage.getItem('user')
        users ? setuser(false) : setuser(true)
    }
    let close = () => {
        setuser(false)
    }
    const onFinish = (values: any) => {
        localStorage.setItem('user', JSON.stringify(values))
        setuser(false)
    };
    let content = () => {
        return <ul className={styles.emojis}>
            {
                Object.values(emojis).map((item, index) => {
                    return <li key={index}>
                        {item}
                    </li>
                })
            }
        </ul>
    }

    // 分页
    const onChange = (pageSize: number) => {
        dispatch({
            type: 'about/getabout',
            payload: {
                page: pageSize,
                pageSize: 6
            }
        })
    }
    
    return (
        <div className={styles.msgboard}>
            <header className={styles.head}>
                <div>
                    <h2>留言板</h2>
                    <p><strong>「请勿灌水 🤖」</strong></p>
                </div>
            </header>

            {
                user ? <div className={styles.shade} onClick={close}>
                    <div onClick={(e) => {
                        e.stopPropagation()
                    }}>
                        <p>
                            <span>请设置你的信息</span>
                            <span onClick={close}>X</span>
                        </p>
                        <Form
                            onFinish={onFinish}
                        >
                            <Form.Item
                                label="名称"
                                name="username"
                                rules={[{ required: true, message: '请输入您的称呼' }]}
                            >
                                <Input />
                            </Form.Item>

                            <Form.Item
                                label="邮箱"
                                name="email"
                                rules={[{ required: true, pattern: /^\w+@\w+\.(com|cn|net)$/, message: '输入合法邮箱地址，以便在收到回复时邮件通知' }]}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item wrapperCol={{ offset: 8, span: 16 }} style={{ textAlign: 'right' }}>

                                <Button style={{ margin: "0 10px 0 0" }} onClick={close}>
                                    取消
                                </Button>
                                <Button type="primary" htmlType="submit" danger>
                                    设置
                                </Button>
                            </Form.Item>
                        </Form>
                    </div>
                </div> : null
            }

            <main>
                <div className={styles.container_up}>
                    <p className={styles.review}>评论</p>

                    <div className={styles.up_content}>

                        {/* 文本域 */}
                        <div className={styles.up_content_text}>
                            <div className={styles.up_content_text_filed}>
                                <div className={styles.filed}>
                                    <textarea className={styles.ant_input} placeholder="请输入评论内容（支持 Markdown）"></textarea>
                                </div>

                                <div className={styles.filed_release}>
                                    <span onClick={shade}>
                                        <Popover className={styles.popover} placement="bottomLeft" content={content} visible={popover} onVisibleChange={VisibleChange} trigger="click">
                                            <span className="iconfont icon-xiaolian"></span>
                                            <span>表情</span>
                                        </Popover>
                                    </span>

                                    <button className={styles.release}>发布</button>
                                </div>
                            </div>
                        </div>

                        {/* comment数据渲染 */}
                        {
                            state.commentData.map((item, index) => {
                                return <div className={styles.comment} key={index}>
                                    <div className={styles.comment_header}>
                                        <span>{item.name[0]}</span>
                                        <span>{item.name}</span>
                                    </div>

                                    <div className={styles.comment_main}>
                                        <div>
                                            <div className={styles.content} dangerouslySetInnerHTML={{ __html: item.html ? item.html : item.content }}></div>
                                        </div>
                                    </div>

                                    <div className={styles.comment_footer}>
                                        <div className={styles.comment_footer_time}>
                                            <span>{item.userAgent}·</span>
                                            <span>{theTime(item.createAt)}</span>
                                            <span><i className='iconfont icon-chat'></i>回复</span>
                                        </div>

                                        {/* children数据 */}
                                        {
                                            item.children.map((item1, index1) => {
                                                return <div className={styles.comment_footer_describe} key={item.id}>
                                                    <div className={styles.describe_header}>
                                                        <span>{item1.name[0]}</span>
                                                        <span>{item1.name}</span>
                                                        <span>回复</span>
                                                        <span>{item1.replyUserName}</span>
                                                    </div>
                                                    <div className={styles.describe_main}>
                                                        <div>
                                                            <div className={styles.content}>{item1.content}</div>
                                                        </div>
                                                    </div>
                                                    <div className={styles.describe_footer}>
                                                        <div className={styles.describe_footer_time}>
                                                            <span>{item1.userAgent}</span>
                                                            <span>{theTime(item1.createAt)}</span>
                                                            <span><i className='iconfont icon-chat'></i> 回复</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            })
                                        }
                                    </div>
                                </div>
                            })
                        }

                        <div className={styles.paging}>
                            <Pagination size="small" total={50} onChange={onChange} />
                        </div>
                    </div>
                </div>

                <div className={styles.container_down}>
                    <p className={styles.recommend}>推荐阅读</p>

                    <div className={styles.down_content}>
                        {/* recommend数据渲染 */}
                        {
                            state.recommentData.map((item, index) => {
                                return <div className={styles.recomment} key={index}>
                                    <Link to={`/Article/Detail?id=${item.id}`} key={item.id}>
                                        <div className={styles.recomment_header}>
                                            <div className={styles.title}>{item.title}</div>
                                            <div className={styles.news_reading}>
                                                <div>|</div>
                                                <span>{theTime(item.publishAt)}</span>
                                                <div>|</div>
                                                <span>{index === 0 ? '' : index === 1 ? '要闻' : '阅读'}</span>
                                            </div>
                                        </div>

                                        <div className={styles.recomment_main}>
                                            {
                                                item.cover === null
                                                    ? null
                                                    : <div className={styles.recomment_main_left}>
                                                        <img src={item.cover} alt="" />
                                                    </div>
                                            }
                                            <div className={styles.recomment_main_right}>
                                                <div className={styles.recomment_main_right_up}>
                                                    <div>{item.summary}</div>
                                                </div>
                                                <div className={styles.recomment_main_right_down}>
                                                    <span>
                                                        <i className='iconfont icon-shoucang'></i>
                                                        <span>{item.likes}</span>
                                                    </span>
                                                    <span className={styles.span}>·</span>
                                                    <span>
                                                        <i className='iconfont icon-kanguo'></i>
                                                        <span>{item.views}</span>
                                                    </span>
                                                    <span className={styles.span}>·</span>
                                                    <span>
                                                        <i className='iconfont icon-fenxiang'></i>
                                                        <span>分享</span>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </Link>
                                </div>
                            })
                        }
                    </div>
                </div>
            </main>
        </div>
    )
}

export default msgboard


